
import React from "react";
import {Form, Select} from "antd";
import {diffProps} from "../../libs/funcs";
import service from "../../libs/request";

/**
 * 下拉选择框
 */
class FormSelect extends React.Component{
    constructor(props) {
        super(props);
        this.state = {};
    }

    onChangeHandel = (value) =>{
        const {
            targetItems,// 联动异步查询
            changeValueAction,// 联动异步查询
            form_my_xuan_jian_store,
            form_store,
            js_store,
            field
        } = this.props;
        let store;
        if(form_my_xuan_jian_store){
            store=form_my_xuan_jian_store
        }else if(form_store){
            store=form_store
        }
        if(changeValueAction && store){
            //通知正在执行ajax
            store.setAjax(true);
            service.request({
                url:changeValueAction.uri,
                method:"get",
                params:{
                    value:value
                },
            }).then(response => {
                store.setAjax(false);
                if (response.data.code === 200){
                    // 假设 response.data 是一个对象，其键与 targetItems 中的 id 对应
                    // 并且你想要更新与这些 id 相关的表单字段
                    // console.log("targetItems",targetItems)
                    Object.keys(response.data.data).forEach(id => {
                        // 找到与 id 对应的 targetItem
                        const targetItem = targetItems.find(item => item.id === id);
                        if (targetItem) {
                            store.setFieldAddonBefore(targetItem.name,response.data.data[id]);
                        }
                    });
                }
            }).catch(err=>{
                store.setAjax(false);
            })
        }

        if(js_store && field){
            js_store.watchAction(field,value);
        }

    };

    render() {
        const {getFieldDecorator} = this.props.form;
        /**
         * options 传一个对象 {key:value}
         */
        const {label,field,initialValue,rules,allowClear,showSearch,placeholder,disabled,js_store} = this.props;
        let {options} = this.props;
        const new_props = diffProps(this.props,["label","form","field","initialValue","rules","options","allowClear","showSearch","placeholder"]);
        const { Option } = Select;
        if(js_store){
            if(field && js_store.options[field]){
                console.log("FormSelect options 原",options);
                options = js_store.options[field];
                console.log("FormSelect options 新",field,options);
            }
            
        }

        return (
            <Form.Item label={label ? label : "下拉选择框"} disabled={disabled}>
                {getFieldDecorator(field ? field : "default_select", {initialValue: initialValue,rules: rules ? rules : []})(
                    <Select
                        showSearch={showSearch ? showSearch : true}
                        allowClear={allowClear ? allowClear : true}
                        placeholder={placeholder ? placeholder : "请选择..."}
                        {...new_props}
                        onChange={this.onChangeHandel}
                    >
                        {
                            Object.keys(options ? options : {}).map(key => (
                                <Option key={key} value={key}>{options[key]}</Option>
                             ))
                        }
                    </Select>
                )}
            </Form.Item>
        );
    }
}

export default FormSelect;
